<template>
	<view class="dAlert" v-show="show">

		<view class="wrapperAlert">
			<view class="vueDAlertWrapper">
				<view class="vueDAlertWrapperTop">
					<view class="vueDAlertWrapperCha" @click.stop="closeModal()">
						<image src="/static/cha.png" class="vueDAlertWrapperChaImg"></image>
					</view>
					<view class="vueDAlertWrapperTitle">温馨提示
					</view>
					<view style="width: 100%;height:80rpx;"></view>
					<text class="vueDAlertWrapperContent">
						恭喜您的积分累计达到30积分,请到附近农行网点领取满50元减30元优惠券（数量有限,先到先得,如遇政策调整不再另行通知）</text>
					<view class="" style="display: flex;flex-direction: row;width: 100%;  ">
						<view style=" flex: 1;margin-right: 20rpx;margin-left:25rpx; ">
							<view class="vueDAlertWrapperBtn" @click.stop="clickBtn( 0)">
								去办卡
							</view>
						</view>
						<view style="   margin-right: 25rpx; ">
							<view style="" class="vueDAlertWrapperBtn" @click.stop="clickBtn(1 )">
								去领券
							</view>
						</view>

					</view>

				</view>

			</view>
		</view>
		<view class="maskHiddenmask"></view>

	</view>
</template>

<script>
	export default {

		name: 'sy-alert',
		props: {
			show: {
				type: Boolean,
				default: false
			}

		},
		data() {
			return {};
		},
		methods: {
			closeModal() {
				this.$emit('close');
				// console.log('-------------------关闭-----------');
			},
			clickBtn(res) {
				this.$emit('clickBtn', res);
				// console.log('-------------------跳转-----------');
			},

		},
		beforeDestroy() {
			console.log('------------------------------');
		}






	}
</script>
<style lang="scss" scoped>
	.maskHiddenmask {
		z-index: 10000;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #000;
		opacity: 0.6;
		transition: background-color .15s linear;
	}

	.wrapperAlert {
		width: 100%;
		z-index: 12000;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		transition: background-color .15s linear;
		display: flex;
		align-items: center;
		justify-content: center;





	}
</style>

<style lang="less">
	.vueDAlertWrapper {
		width: 100%;

		display: flex;
		flex-direction: column;
		align-items: center;
		position: absolute;

		.vueDAlertWrapperTop {
			width: 100%;

			width: 500rpx;
			height: 700rpx;
			background: url('https://haoransy.oss-cn-beijing.aliyuncs.com/haoransy/static/20240428134147.png') no-repeat center center;
			background-size: 100% 100%;
			border-radius: 15rpx;
	 
			// background-color: #fff;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.vueDAlertWrapperTitle {
			margin-top: -10px;
			background-image: linear-gradient(to right, #f39f7a, #fe5953);
			-webkit-background-clip: text;
			color: transparent;
		}

		.vueDAlertWrapperContent {

			width: 260rpx;
			text-align: start;
			font-size: 28rpx;
			height: 440rpx;
			line-height: 1.8;
			color: red;
			letter-spacing: 2px;
			font-weight: bold;

		}

		.vueDAlertWrapperBtn {
			width: 150rpx;
			height: 55rpx;
			background: linear-gradient(180deg, #FFE8A6, #FFE8A6, #FDC249);
			box-shadow: 0px 5px 24px 0px rgba(167, 7, 46, 0.45);
			border-radius: 15rpx;
			padding: 5rpx;

			display: flex;
			align-items: center;
			justify-content: center;


			font-size: 28rpx;
			font-family: MI LANTING;
			font-weight: 500;
			color: #E9153E;

		}

		.vueDAlertWrapperCha {
			width: 100%;
			height: 56rpx;
			position: relative;
			display: flex;
			align-items: flex-end;
			justify-content: right;


			.vueDAlertWrapperChaImg {
				width: 40rpx;
				position: absolute;
				right: 5px;
				top: 5px;
				height: 40rpx;
				// background: #FFF;
				border-radius: 50%;
			}
		}

	}
</style>